<template>
  <div class="tab-fluid">
    <div>

      <div class="tab-row-1">
        <div class="tab-col-6">
          <div class="tab-card">
            <div class="tab-card-header">CPU信息</div>
            <div class="tab-card-body">
              <table class="vue-el-table">
                <thead>
                  <tr>
                    <th>属性</th>
                    <th>值</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>核心数</td>
                    <td>{{info.availableProcessors}}</td>
                  </tr>
                  <tr>
                    <td>用户使用率</td>
                    <td>{{info.systemCpuLoad}}%</td>
                  </tr>
                  <tr>
                    <td>系统使用率</td>
                    <td>{{info.sysCpuLoad}}%</td>
                  </tr>
                  <tr>
                    <td>当前空闲率</td>
                    <td>{{info.freeCpuLoad}}%</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="tab-col-6">
          <div class="tab-card">
            <div class="tab-card-header">内存信息</div>
            <div class="tab-card-body">
              <table class="vue-el-table">
                <thead>
                  <tr>
                    <th>属性</th>
                    <th>内存</th>
                    <th>JVM</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>总内存</td>
                    <td>{{info.totalPhysicalMemorySize}}GB</td>
                    <td>{{ info.jvmTotalMemory}}MB</td>
                  </tr>
                  <tr>
                    <td>已用内存</td>
                    <td>{{info.usingPhysicalMemorySize}}GB</td>
                    <td>{{info.jvmUsingMemory}}MB</td>
                  </tr>
                  <tr>
                    <td>剩余内存</td>
                    <td>{{info.freePhysicalMemorySize}}GB</td>
                    <td>{{ info.jvmFreeMemory }}MB</td>
                  </tr>
                  <tr>
                    <td>使用率</td>
                    <td>{{info.memoryUsageRate}}%</td>
                    <td>{{info.jvmUsageRate}}%</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <div class="tab-row-2">
        <div class="tab-col-12">
          <div class="tab-card">
            <div class="tab-card-header">JAVA虚拟机信息</div>
            <div class="tab-card-body">
              <table class="vue-el-table">
                <tbody>
                  <tr>
                    <td class="tab-td-back">Jvm名称</td>
                    <td>{{info.jvmName}}</td>
                    <td class="tab-td-back">Java版本</td>
                    <td>{{info.javaVersion}}</td>
                  </tr>
                  <tr>
                    <td class="tab-td-back">启动时间</td>
                    <td>{{ info.startTime | formatCreateTime}}</td>
                    <td class="tab-td-back">运行时长</td>
                    <td>{{info.runningTime}}</td>
                  </tr>
                  <tr>
                    <td class="tab-td-back" colspan="1">安装路径</td>
                    <td colspan="3">{{info.jvmPath}}</td>
                  </tr>
                  <tr>
                    <td class="tab-td-back" colspan="1">项目路径</td>
                    <td colspan="3">{{info.projectPath}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <div class="tab-row-3">
        <div class="tab-col-12">
          <div class="tab-card">
            <div class="tab-card-header">服务器信息</div>
            <div class="tab-card-body">
              <table class="vue-el-table">
                <tbody>
                  <tr>
                    <td class="tab-td-back">
                      服务器名称
                    </td>
                    <td>{{info.serverName}}</td>
                    <td class="tab-td-back">操作系统</td>
                    <td>{{info.serverSystem}}</td>
                  </tr>
                  <tr>
                    <td class="tab-td-back">服务器IP</td>
                    <td>{{info.serverAddress}}</td>
                    <td class="tab-td-back">系统架构</td>
                    <td>{{info.serverArch}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <div class="tab-row-3">
        <div class="tab-col-12">
          <div class="tab-card">
            <div class="tab-card-header">磁盘信息</div>
            <div class="tab-card-body">
              <table class="vue-el-table">
                <thead>
                <tr>
                  <th>路径</th>
                  <th>总大小</th>
                  <th>已用大小</th>
                  <th>可用大小</th>
                  <th>已用百分比</th>
                </tr>
                </thead>
                <tbody>
                  <tr v-for="item in info.info">
                    <td>{{item.path}}</td>
                    <td>{{item.totalSpace}}</td>
                    <td>{{item.usableSpace}}</td>
                    <td>{{item.freeSpace}}</td>
                    <td>{{item.percent}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { getInfo } from "@/api/monitor";
import { formatDate } from "@/utils/date";

export default {
  name: "home",
  data() {
    return {
      info: {
      }
    };
  },
  filters: {
    formatCreateTime(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getInfo().then(response => {
        this.info = response.data;
        this.info.runningTime = this.formatDuring(this.info.startDate)
        this.info.systemCpuLoad = this.info.systemCpuLoad.toFixed(2)
        this.info.sysCpuLoad = this.info.sysCpuLoad.toFixed(2)
        this.info.freeCpuLoad = this.info.freeCpuLoad.toFixed(2)
        this.info.memoryUsageRate = this.info.memoryUsageRate.toFixed(2)
        this.info.jvmUsageRate = this.info.jvmUsageRate.toFixed(2)
      }).catch(reason => {});
    },
    formatDuring(mss){
      let days = parseInt(mss / (1000 * 60 * 60 * 24));
      let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      let seconds = (mss % (1000 * 60)) / 1000;
      return days + " 天 " + hours + " 小时 " + minutes + " 分钟 ";
    }

  }
};
</script>

<style lang="scss" scoped>
.tab-fluid {
  padding: 15px;
  background-color: #f2f2f2;
}

tr {
  &:hover {
    background-color: #f2f2f2;
  }
}

.tab-row-1 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  .tab-col-6 {
    flex: 1;
    padding: 7.5px;
    .tab-card {
      background-color: #fff;
      .tab-card-header {
        height: 42px;
        line-height: 42px;
        padding: 0 15px;
        border-bottom: 1px solid #f6f6f6;
        color: #333;
        border-radius: 2px 2px 0 0;
        font-size: 14px;
      }
      .tab-card-body {
        padding: 10px 15px;
        line-height: 24px;
        .vue-el-table {
          width: 100%;
          background-color: #fff;
          color: #666;
          font-size: 14px;
          border-collapse: collapse;
          thead tr {
            width: 100%;
            background-color: #f2f2f2;
          }

          td,
          th {
            padding: 9px 15px;
            min-height: 20px;
            line-height: 20px;
            font-size: 14px;
            text-align: left;
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
            border: 1px solid #e6e6e6;
          }
        }
      }
    }
  }
}

.tab-row-2 {
  width: 100%;
  height: auto;
  display: flex;
  .tab-col-12 {
    flex: 1;
    padding: 7.5px;
    .tab-card {
      background-color: #fff;
      .tab-card-header {
        height: 42px;
        line-height: 42px;
        padding: 0 15px;
        border-bottom: 1px solid #f6f6f6;
        color: #333;
        border-radius: 2px 2px 0 0;
        font-size: 14px;
      }
      .tab-card-body {
        padding: 10px 15px;
        line-height: 24px;
        .vue-el-table {
          width: 100%;
          background-color: #fff;
          color: #666;
          font-size: 14px;
          border-collapse: collapse;
          thead tr {
            width: 100%;
            background-color: #f2f2f2;
          }
          td,
          th {
            padding: 9px 15px;
            min-height: 20px;
            line-height: 20px;
            font-size: 14px;
            text-align: left;
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
            border: 1px solid #e6e6e6;
          }
          .tab-td-back {
            background-color: #f2f2f2;
          }
        }
      }
    }
  }
}

.tab-row-3 {
  width: 100%;
  height: auto;
  display: flex;
  .tab-col-12 {
    flex: 1;
    padding: 7.5px;
    .tab-card {
      background-color: #fff;
      .tab-card-header {
        height: 42px;
        line-height: 42px;
        padding: 0 15px;
        border-bottom: 1px solid #f6f6f6;
        color: #333;
        border-radius: 2px 2px 0 0;
        font-size: 14px;
      }
      .tab-card-body {
        padding: 10px 15px;
        line-height: 24px;
        .vue-el-table {
          width: 100%;
          background-color: #fff;
          color: #666;
          font-size: 14px;
          border-collapse: collapse;
          thead tr {
            width: 100%;
            background-color: #f2f2f2;
          }
          td,
          th {
            padding: 9px 15px;
            min-height: 20px;
            line-height: 20px;
            font-size: 14px;
            text-align: left;
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
            border: 1px solid #e6e6e6;
          }
          .tab-td-back {
            background-color: #f2f2f2;
          }
        }
      }
    }
  }
}
</style>
